<template>
  <view class="home">
    <view class="home-tab">
      <view class="home-tab-title">
        <view class="title-inner">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#fa541c"
          ></uni-segmented-control>
        </view>
      </view>
    </view>
    <view class="home-tab-content">
        <view v-if="current === 0">
          <home-recommend :data="foods"></home-recommend>
        </view>
        <view v-if="current === 1">
          <home-activity></home-activity>
        </view>
        <view v-if="current === 2">
          <home-new></home-new>
        </view>
        <view v-if="current === 3">
          <home-tips></home-tips>
        </view>
    </view>
    <!-- <view>
      <uni-fab
        :pattern="pattern"
        horizontal="right"
        vertical="bottom"
        @fabClick="onFabClick"
      ></uni-fab>
    </view> -->
  </view>
</template>

<script>
import homeActivity from './home-activity'
import homeTips from './home-tips'
import homeNew from './home-new'
import homeRecommend from './home-recommend'
import {uniSegmentedControl, uniFab} from '@dcloudio/uni-ui'
import {getFoodTop, getCartoonPic} from '@/api/food'
import {mapState} from 'vuex';

export default {
  name: 'home',
  components: {
    homeActivity,
    homeTips,
    homeNew,
    homeRecommend,
    uniSegmentedControl,
    uniFab
  },
  data() {
    return {
      items: ['推荐','活动','新店','贴士'], // 头部导航
      current: 0, // 当前当行索引
      foods: []
    }
  },
  computed:{
    ...mapState(['hasLogin', 'userInfo']),
  },
  // mounted() {
  //   console.log('index mounted')
  //   this.getFoods()
  // },
  onShow() {
    console.log('index onShow')
    this.getFoods()
  },
  methods: {
    // 切换导航条目
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
          this.current = e.currentIndex;
      }
    },
    onFabClick(){
      uni.navigateTo({
        url: '/pages/mine/createRemark'
      })
    },
    getFoods() {
			getFoodTop(this.userInfo.schoolId).then(res => {
				if (res.code !== 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				this.foods = res.data
			})
		},
  }
}
</script>
<style lang='scss'>
  .home {
    .home-tab {
      .home-tab-title {
        position: relative;
        .title-inner {
          width: 70%;
          margin: 0 auto;
        }
      }
    }
  }
</style>
